<template>

  <div class="main">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-card v-for="item in list" :key="item.filmId">
        <template #title>
          <div class="title">{{item.name}}</div>
        </template>

        <template #thumb>
          <div>
            <img :src="item.poster" width="66" height="92" />
          </div>
        </template>

        <template #tags>
          <van-tag plain type="danger" class="buy" size="large">预购</van-tag>
        </template>

        <template #desc>
          <div class="desc">
            <div>主演：{{ item.actors | parseActors }}</div>
            <div>上映日期：{{date(item.premiereAt)}}</div>
          </div>
        </template>
      </van-card>
    </van-list>
  </div>
 
</template>

<script>
import Vue from "vue";
import { Card, Tag, List } from "vant";
import uri from "@/config/uri";

Vue.use(Card);
Vue.use(Tag);
Vue.use(List);

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
    };
  },
  filters: {
    parseActors(actors) {
      if (actors) {
        let actorsStr = "";
        actors.forEach((items) => {
          actorsStr += items.name + " ";
        });
        return actorsStr.length > 15
          ? actorsStr.substr(0, 15) + "..."
          : actorsStr;
      } else {
        return "暂无主演";
      }
    },
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.$http
        .get(
          uri.getSoonList +
            "?cityId=" +
            this.$cookies.get("cityId") +
            "&pageNum=" +
            this.pageNum
        )
        .then((ret) => {
          if (this.pageNum <= Math.ceil(ret.data.total / 10)) {
            this.list = [...this.list, ...ret.data.films];
            this.pageNum++;
          } else {
            this.finished = true;
          }
          // 重置加载状态
          this.loading = false;
        });
    },
    date(time) {
      // 先把时间戳转化成正常时间
      var times = new Date(parseInt(time) * 1000);

      // 当前是周几？：
      var weeks = times.getDay(); //返回的是数字
      // 将周几转化成汉字：
      var week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      var newWeek = week[weeks];

      // 当前是n月n日？：
      var month = times.getMonth() + 1;
      var day = times.getDate();

      // 拼接在一起
      var newDay = newWeek + " " + month + "月" + day + "日";

      return newDay;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-bottom: 50px;
}
.title {
  margin-top: 8px;
  font-size: 16px;
  color: #191a1b;
}
.desc {
  margin-top: 4px;
  font-size: 13px;
  color: #797d82;
}
.buy {
  position: relative;
  top: -37px;
  float: right;
}
.van-card__thumb {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 70px;
  /* height: 88px; */
  /* margin-right: 8px; */
}
.grade {
  color: orange;
}
.main {
  margin-bottom: 50px;
}
</style>